
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
    <script type="text/javascript" src="<%=request.getContextPath()%>/common/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/common/layui/css/layui.css">
    <script src="<%=request.getContextPath()%>/common/layui/layui.js"></script>
</head>
<body>
<div class="layui-row layui-col-space15">
    <div class="layui-col-md3">

    </div>

    <div class="layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-header">
                <h1 align="center">注册</h1>
            </div>
            <div class="layui-card-body">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" lay-verify="name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="password"  lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            <input type="radio" name="sex" value="1" title="男">
                            <input type="radio" name="sex" value="2" title="女">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">爱好</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="hobby1" lay-filter="hobbys" value="1" title="写作">
                            <input type="checkbox" name="hobby2" lay-filter="hobbys" value="2" title="阅读">
                            <input type="checkbox" name="hobby3" lay-filter="hobbys" value="3" title="发呆">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">出生日期</label>
                        <div class="layui-input-block">
                            <input type="text" id="birthday" name="birthday" placeholder="请选择日期" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">身份证号</label>
                        <div class="layui-input-block">
                            <input type="text" name="idCard"  placeholder="请输入身份证号" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">地区</label>
                        <div class="layui-input-inline">
                            <select id="pid" lay-filter="pid" name="pid">

                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select id="sid" lay-filter="sid" name="sid">

                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select id="cid" lay-filter="cid" name="cid">

                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">住址</label>
                        <div class="layui-input-block">
                            <input type="text" name="address"  placeholder="请输入住址" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-block">
                            <input type="text" name="email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="button" class="layui-btn" lay-submit lay-filter="addForm" value="注册" />
                            <a href="login.jsp" style="float: right">已有账号？立即登录</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="layui-col-md3">

    </div>
</div>
</body>
<script>
    layui.use(function (){
        var laydate = layui.laydate;
        var userForm = layui.form;
        var userLayer = layui.layer;

        var hobbys=[];
        userForm.on("checkbox(hobbys)",function (res){
            if (res.elem.checked){
                hobbys.push(res.value);
            }else {
                for (let i = 0; i < hobbys.length; i++) {
                    if (hobbys[i]===res.value){
                        hobbys.splice(i,1);
                    }
                }
            }
        })

        laydate.render({
            elem:'#birthday'
        })

        initSelect('pid',0);
        userForm.render('select');

        userForm.on("select(pid)",function (res){
            initSelect("sid",res.value);
            $("#cid").html("");
            userForm.render('select');
        })

        userForm.on("select(sid)",function (res){
            initSelect("cid",res.value);
            userForm.render('select');
        })

        userForm.verify({
            name:function (value,item){
                if (value.length<5){
                    return "用户名不能小于5位";
                }
                var zz = /^[A-Za-z0-9]+$/;
                if (!zz.test(value)){
                    return "用户名只能是字母和数字";
                }
                var flag=true;//用户名不存在
                $.post({
                    url:"<%=request.getContextPath()%>/user/userIsExist",
                    async: false,
                    data: {name:value},
                    success:function (res){
                        if (res.code==200){
                            if (res.data==1){
                                flag=false;
                            }
                        }else{
                            userLayer.msg(res.msg);
                        }
                    }
                })
                if (flag==false){
                    return "用户名已存在";
                }
            },
            password:function (value,item){
                if (value.length<5){
                    return "密码不能小于5位";
                }
                var zz = /^[A-Za-z0-9]+$/;
                if (!zz.test(value)){
                    return "密码只能是字母和数字";
                }
            },
            email:function (value,item){
                var zz = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
                if (!zz.test(value)){
                    return "请输入正确的邮箱";
                }
            }
        })

        userForm.on("submit(addForm)",function (res) {
            res.field.hobbys=hobbys.toString();
            var areaId = res.field.pid+","+res.field.sid+","+res.field.cid;
            res.field.areaId=areaId;
            console.log(res.field)
            $.post({
                url:"<%=request.getContextPath()%>/user/register",
                async: false,
                data:res.field,
                success:function (rs){
                    console.log(rs);
                    if (rs.code==200){
                        location.href="login.jsp";
                    }else{
                        userLayer.msg(rs.msg)
                    }
                }
            })
        })

        function initSelect(elem,pid){
            var selectHtml="<option value=''>请选择</option>";
            $.post({
                url:"<%=request.getContextPath()%>/area/queryAreaByPid",
                async:false,
                data:{
                    pid: pid
                },success:function (res){
                    if (res.code==200){
                        for (var i = 0; i < res.data.length; i++) {
                            selectHtml+="<option value='"+res.data[i].id+"'>"+res.data[i].name+"</option>";
                        }
                    }else {
                        layer.msg("请求异常");
                    }

                }
            })
            $("#"+elem).html(selectHtml);
        }
    })
</script>
</html>
